<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body class="index">
		<!-- 主体部分 -->
		<main class="index-main">
			<div class="swiper">
				<div class="swiper-wrapper">
					<div class="swiper-slide swiper1"></div>
					<div class="swiper-slide swiper2"></div>
					<div class="swiper-slide swiper3"></div>
				</div>
				<!-- 如果需要分页器 -->
				<div class="swiper-pagination"></div>
			</div>
			<section class="first-row">
				<div class="ranking">
					<p>今日排名</p>
					<span id="rankNum">9</span>
				</div>
				<div class="clockin">
					<p>累计打卡<span id="clockNum">23</span>天</p>
					<button type="button" id="clockBtn">今日打卡</button>
				</div>
			</section>
			<section class="second-row">
				<div class="sports-data">
					<a href="#">运动数据</a>
				</div>
				<div class="sports-badge">
					<p>累计运动徽章</p>
					<span id="badgeNum">3</span>
				</div>
			</section>
			<section class="third-row">
				<a href="#">课程训练</a>
			</section>
			<section class="fourth-row">
				<a href="#">户外运动</a>
			</section>
		</main>
		<!-- 底部导航 -->
		<nav class="tabbar"></nav>
	</body>
</html>
